<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title></title>
</head>
<body>
	<div align="right">
		<font size="5"></font>
		<audio id="myaudio" src="music/2.mp3" hidden="ture" loop="false" controls="controls"></audio>
		<select id="sel" onchange="musicchange()">
			<option selected="true">please choose audio to play the music</option>
			<option value="music/2.mp3">ting mother de hua</option>
			<option value="music/3.mp3">like ni de name</option>
			<option value="music/1.mp3">zhu ni borthday happy</option>
			<option value="music/4.mp3">borthday happy</option>
		</select>
	</div>

	<div style="display: flex;">
		<div id="odv" style="color: red;font: 20px;margin-top: 10px;">
			zhu xiao gou sheng ri kuai le
		</div>

		<img id="birthimg" src="picture/6.jpg" style="width: 200px;height: 200px; margin-left: 100px;" />
		<img id="birthimg" src="picture/4.jpg" style="width: 200px;height: 200px; margin-left: 10px;" />
	</div>
	
	
</body>
</html>

<script type="text/javascript">
	var birthimg= document.getElementById('birthimg');
	var odv= document.getElementById('odv');
	var sum = 100;
	var i = 10;
	var flag = "right"
	var flow = "top"

	setInterval(function(){
		if ( flow == "top" && i>=200) {
			flow = "under";
			i-=1;
			odv.style.marginTop = i +"px"
		}else if(flow == "top" && i<200){
			i+=1;
			odv.style.marginTop = i +"px"
		}else if(flow == "under" && i<=10){
			flow = "top";
			i+=1;
			odv.style.marginTop = i +"px"
		}else if(flow == "under" && i>10){
			i-=1;
			odv.style.marginTop = i +"px"
		}
	},5)

	setInterval(function(){
		if ( flag == "right" && sum>=800) {
			flag = "left";
			sum-=1;
			birthimg.style.marginLeft = sum +"px"
		}else if(flag == "right" && sum<800){
			sum+=1;
			birthimg.style.marginLeft = sum +"px"
		}else if(flag == "left" && sum<=100){
			flag = "right";
			sum+=1;
			birthimg.style.marginLeft = sum +"px"
		}else if(flag == "left" && sum>100){
			sum-=1;
			birthimg.style.marginLeft = sum +"px"
		}
	},10)
	
</script>

<script type="text/javascript">
	var n = 0;
	var haha = new Array("red","blue","yellow","red","blue","yellow");
	function qaq(){
		n++;
		if(n>=5) n=0;
		document.bgColor = haha[n];
		document.fgColor = haha[n-1];
		setTimeout("qaq()",10);
	}

	var heihei = new Array("#000000","#ffffff","#000000","#ffffff","#000000","#ffffff","#000000","#ffffff");
	function wow(){
		n++;
		if(n>=7) n=0;
		document.bgColor = heihei[n];
		document.fgColor = heihei[n-1];
		setTimeout("wow()",10);
	}

	var arrcolors = new Array("#00ff66","#ffff99","#99ccff","#ffccff","#ffcc99","#00FFFF","#FFFF00","#FFCC00","#FF00FF");
	function turncolors(){
		n++;
		if(n>=8) n=0;
		document.bgColor = arrcolors[n];
		document.fgColor = arrcolors[n-1];
		setTimeout("turncolors()",1000);
	}

	qaq()
</script>

<script type="text/javascript">
	var myaudio = document.getElementById('myaudio');
	var obj = document.getElementById('sel');
	function musicchange() {
		if (obj.options[obj.selectedIndex].innerHTML == "ting mother de hua"){
			myaudio.src = "music/2.mp3";
			myaudio.play();
		}else if(obj.options[obj.selectedIndex].innerHTML == "like ni de name"){
			myaudio.src = "music/3.mp3";
			myaudio.play();
		}else if(obj.options[obj.selectedIndex].innerHTML == "zhu ni borthday happy"){
			myaudio.src = "music/1.mp3";
			myaudio.play();
		}else if(obj.options[obj.selectedIndex].innerHTML == "borthday happy"){
			myaudio.src = "music/4.mp3";
			myaudio.play();
		}else{
			myaudio.src = "music/2.mp3";
			myaudio.play();
		}
	};

	// function audioPlay(){
	// 	var myaudio = document.getElementById('myaudio');
	// 	myaudio.play()
	// };
</script>

